<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>产品管理</title>
	<meta name="decorator" content="custom"/>
 	<style type="text/css">
 		html, body {overflow:auto;}
 		.main{
 			margin-left:15px;overflow:auto;
 		}
 		.tablist-left {
			width: 25%;
			display: inline-block;
		}
		.tablist-left li a.ui-btn{
			background:#fff;font-size:1.2em;
			color:black;
			height:40px;line-height:40px;
		}
		.tablist-content {
			width: 73%;
			display: inline-block;
			vertical-align: top;
			margin-left: 1%;
		}
		.tablist-content .ui-checkbox label{
			background:#e5e5e5;color:black;border:1px solid #888888;
		}
		.tablist-content .ui-checkbox label.ui-checkbox-on{
			background:#faFF25;
		}
	 	.item{
	 		float:left;margin:5px;padding:0 5px;background:#fff;
	 		width:160px;height:230px;border:1px solid #888888;
	 		-webkit-border-radius: .3125em;
			border-radius: .3125em; 
	 	}
	 	.item label{
	 		height:60px;
	 	}
	 	.item img{
	 		margin-left:5px;max-width:160px;max-height:120px;
	 	}
	 	.item .noimg{
	 		width:160px;height:120px;border:1px solid #888888;
	 		text-align:center;line-height:100px;
	 	}
	 	label{
	 		margin-right:10px;
	 	}
	 	font{font-size:20px;font-weight:bold;}
	 	#selectParameter{
	 		margin:10px;font-size:16px;font-weight:bold;
	 		width:100%;clear:both;height:auto;OVERFLOW-y:auto;min-height:20px;
	 	}
	 	#selectParameter font{
	 		float:left;width:100px;
	 	}
	 	#selectParameter p{
	 		float:left;width:60%;margin:0;font-size:18px;font-weight:normal;
	 	}
	 	#paramterTab{
	 		border: 1px solid #dddddd;
  			-webkit-border-radius: 4px;
     		-moz-border-radius: 4px;
         	border-radius: 4px;
         	margin-bottom:300px;
         	background:#fff;
	 	}
	 	#paramterTab ul li a:hover{
		    background:#fff;color:red;text-shadow: 0  0 0 /*{a-active-shadow-radius}*/ #0a0a0b;
		}
	 	#paramterTab ul li.ui-btn-active a{
		    background:#ebc12c;color:red;
		    text-shadow: 0  0 0 /*{a-active-shadow-radius}*/ #0a0a0b;
		}
	 	#customerPhoto{
	 		margin:20px;
	 	}
	 	.photobuttons{
	 		text-align:center;margin-bottom:6px;
	 	}
	 	.image-photo{margin:0 20px;width:200px;height:180px;border-radius:5px;}
		#searchForm .ui-select{
			display:inline-block;vertical-align: middle;width:200px;
		}
		#searchForm thead tr {
			background: #f3f3f3;text-align: left;
		}
		#searchForm tbody tr,
		#searchForm tbody td {
		    background-color: #f3f3f3;
		    background-color: #f3f3f3;
		}
		#searchForm td {
			text-align: left !important;
		}
	 </style>
	<script type="text/javascript">
		var photoUploading = false;
		$(document).ready(function() {
			$("#paramterTab ul li:first-child").addClass('ui-btn-active');
			$('#paramterTab ul li').bind('click', function(e) {
				$('#paramterTab ul li').removeClass('ui-btn-active');
				$(this).addClass('ui-btn-active');
			});
			$("#paramterTab input").click(function() {
				var html = $('#selectNames').html();
				 if($(this).attr("checked")) {
					if(html != "") {
						html += " , ";
					}
					html += this.value;
                 } else {
                	 if(html.indexOf(" , " + this.value) > -1) {
                		 html = html.replace(" , " + this.value, ""); 
                	 } else {
                		 html = html.replace(this.value + " , ", ""); 
                		 html = html.replace(this.value, "");  
                	 }
                 }
				 $('#selectNames').html(html);
			});
			
			$(".noimg").click(function() {
				var id = $(this).attr("value");
				var o = document.getElementById(id);
				o.click();
			});
			var current_photo = 1;
			$("#photoFile").live('change', function(){
				imageUpload(current_photo);
				global.displayAsImage(this, "showPhoto" + current_photo);
				$(this).val();
				if(current_photo == 3) {
					current_photo = 1;
				} else {
					current_photo += 1;
				}
			});
		});
		
		function imageUpload(current_photo){
			photoUploading = true;
			$.ajaxFileUpload({
					url:'${ctx}/common/upload/picture',
					secureuri:false,
					fileElementId:'photoFile',
					dataType: 'json',
					beforeSend:function()
					{
						$("#loading").show();
					},
					complete:function()
					{
						$("#loading").hide();
					},				
					success: function (data, status)
					{
						photoUploading = false;
						$("#photo" + current_photo).val(data.image);
						showTip('图片上传完成');
					},
					error: function (data, status, e)
					{
						showTip(e);
					}
				}
			);
            return false;
		}
		function searchList() {
			if(photoUploading) {
				showTip('正在上传图片，请稍等...');
				return;
			}
			var ids = [];
			$('#paramterTab input').each(function(){
				if(this.checked) {
					ids.push(this.id);
				}
	        });
			
			if(ids.length == 0) {
				showTip("选择的参数为空！");
				return;
			}
			if($('#employee_id').val() == '') {
				showTip("员工选择为空！");
				return;
			}
			$('#searchIds').val(ids.join(";"));
			$('#searchForm').submit();
		}
	</script>
</head>
<body>
	<form id="searchForm" class="form-input" action="${ctx}/expert/customerExam/save" method="post">
		<div class="icon-buttons">
			<a data-role="button" data-inline="true" data-icon="back" data-iconpos="notext"  href="${ctx}/base/customer/search">返回</a>
			<input onclick="searchList()" data-icon="check" data-iconpos="notext" type="button" value="保 存" data-inline="true"/>
		</div>
		<input id="customer_id" name="customer_id" type="hidden" value="${customer.id}"/>
		<font>&nbsp;当前顾客: ${customer.name}</font>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<font>服务专员:</font>
		<select id="employee_id" data-native-menu="false" name="employee_id">   
		  	<c:forEach var="map" items="${fns:getCustomerEmployee(customer.id)}">
			 	<option value='${map.key}'>  
			  		${map.value}  
				</option>   
		 	</c:forEach>
		</select> 
		
		<input type="hidden" id="searchIds" name="ids"/>
		<div id="selectParameter">
			<font>参数选择: </font><p id="selectNames" ></p>
		</div>
		<div style="position:absolute;bottom:20px;left:10px;">
			<input type="hidden" id="photo1" name="photo1"/>
			<input type="hidden" id="photo2" name="photo2"/>
			<input type="hidden" id="photo3" name="photo3"/>
			<div data-role="fieldcontain">
				<label for="photoFile">皮肤诊断照片:</label>
				<input type="file" id="photoFile" name="file" accept="image/*" capture="camera">
			</div>
			<div style="text-align:center;margin-bottom:20px;">
				<img id="showPhoto1" class="image-photo" alt="顾客照片1" src="#">
				<img id="showPhoto2" class="image-photo" alt="顾客照片2" src="#">
				<img id="showPhoto3" class="image-photo" alt="顾客照片3" src="#">
			</div>
		</div>
	</form>	
<div data-role="tabs" id="paramterTab">
    <ul data-role="listview" data-inset="true" class="tablist-left">
     	<c:forEach items="${pList}" var="parameterCategory" varStatus="idxStatus">
      		<li><a href="#tab${idxStatus.index}">${parameterCategory.name}</a></li>
     	</c:forEach>
    </ul>
    <c:forEach items="${pList}" var="parameterCategory" varStatus="idxStatus">
      	<div id="tab${idxStatus.index}" class="ui-body-d tablist-content">
    		<c:forEach items="${parameterCategory.childList}" var="parameter">
			<div class="item">
				<label>
			        <input type="checkbox" id="${parameter.id}" value="${parameter.name}">${parameter.name}
			    </label>
			<c:if test="${not empty parameter.image1}">
				<div class="noimg"  value="${parameter.id}">
					<img src="${ossPath}${parameter.image1}" alt="参数图片"/>
				</div>
			</c:if>
			<c:if test="${empty parameter.image1}">
				<div class="noimg"  value="${parameter.id}">无图片</div>
			</c:if>
			</div>
		</c:forEach>
  		</div>
     </c:forEach>
</div>

</body>
</html>
